<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>introduce</title>
    <style>
        html, body {
            background-color: #26282c;
        }

        h1 {
            color: white;
            position: absolute;
            top: 100px;
            left: 650px;
        }

        p {
            color: white;
            font-weight: 600;
            font-size: larger;
            position: absolute;
            top: 150px;
            left: 260px;
        }

        h2 {
            color: white;
            position: absolute;
            top: 200px;
            left: 260px;

        }

        .int {
            color: white;
            font-weight: 550;
            font-family: "Arial";
            position: absolute;
            top: 250px;
            left: 260px;
            line-height: 27px;

        }

        #link {
            position: absolute;
            left: 130px;
            top: 10px;
            -webkit-user-drag: none;
            user-select: none;
        }

        .link1 {
            color: white;
            font-weight: 900;
            font-size: 25px;;
            font-family: "Arial";
            font-style: normal;
            position: absolute;
            left: 70px;
            top: 10px;
            -webkit-user-drag: none;
            user-select: none;
        }

        .index {

            color: white;
            position: absolute;
            left: 350px;
            top: 28px;
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .index li {
            float: left;
        }

        a {
            color: white;
            display: block;
            width: 150px;
            background-color: #26282c;
            font-weight: 600;
            text-decoration: none;
            user-select: none;
        }

        a:hover {
            text-decoration: underline;
        }

    </style>
</head>
<body>
<img src="/static/img/homepage/star.png" alt="">
<div class="left">
    <a href="home_page.html" id="link">
        <img src="../../img/logo.png"/>
        <div class="link1">聊天吧</div>
    </a>
    <ul class="index">
        <li><a href="introduce.html">本站介绍</a></li>
        <li><a href="team.html">联系我们</a></li>
    </ul>
</div>
<div class="title">
    <h1>网站介绍</h1>
</div>
<div class="passage">
    <p>本网站使用WebRTC技术，是一个实时聊天平台，包括实时的文本聊天、音频聊天功能，还拥有部分社交功能。</p>
    <h2>产品功能：</h2>
    <ul class="int">
        <li>客户可以通过浏览器访问在线网站进行注册</li>
        <li>客户可以通过已注册的账号登录</li>
        <li>客户可以选择创建音频聊天房间或视频聊天房间，并且可以设置房间容量（上限为5人），设置房间密码（默认不设置）</li>
        <li>在房间有多余容量时，客户可以加入该未加密的房间，可以凭借密码加入该加密的房间</li>
        <li>客户可以在房间内实时与其他用户进行文字交流</li>
        <li>客户（拥有麦克风的情况下）可以在音频房间内说话，使得其他处于同一房间的客户听到；客户（拥有播放设备的情况下）可以听到其他客户的声音</li>
        <li>客户（在拥有摄像头和麦克风的情况下）可以分享自己的视频与音频，可以看到其他客户成员视频及语音</li>
        <li>客户可以调整自己的麦克风音量，播放器音量</li>
        <li>创建房间的客户可以管理房间内的其他客户成员，如踢出某一客户成员</li>
        <li>处于房间内的客户可以邀请自己的好友进入房间</li>
        <li>处于房间内的客户可以选择添加房间内的其他客户成员为好友</li>
        <li>客户可以退出房间，当房间内所有客户都退出房间后，房间将被删除</li>
        <li>客户可以访问自己的主页，在主页可以看到自己的个人信息，好友列表，留言板信息</li>
        <li>客户可以给好友留言，可以输入好友UID添加好友，可以删除好友</li>
        <li>客户可以分享房间的链接，方便其他用户加入房间</li>
        <li>未登录的用户点击链接后转到登录界面，登录完成后直接进入房间；已经登陆的用户点击链接后直接进入房间。（无论房间是否设置密码）</li>
        <li>客户可以退出登录</li>
    </ul>
</div>


</body>
</html>